<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>layout</title>
		<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
		<script type="text/javascript" src="../js/ext-base.js"></script>
		<script type="text/javascript" src="../js/ext-all-debug.js"></script>
		<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
        <link id="theme" rel="stylesheet" type="text/css" href="" />
        <script type="text/javascript">
Ext.onReady(function(){

    // grid start
    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds.load();

    var grid = new Ext.grid.GridPanel({
        ds: ds,
        cm: cm,
        title: 'center-north',
        region: 'north'
    });
    // grid end

    // tree start
    var tree = new Ext.tree.TreePanel({
        loader: new Ext.tree.TreeLoader({dataUrl: '03-04.txt'}),
        title: 'west',
        region: 'west',
        split: true,
        border: true,
        collapsible: true,
        width: 120,
        minSize: 80,
        maxSize: 200
    });

    var root = new Ext.tree.AsyncTreeNode({text:'偶是根'});
    tree.setRootNode(root);
    root.expand();
    // tree end

    // form start
    var form = new Ext.form.FormPanel({
        defaultType: 'textfield',
        labelAlign: 'right',
        title: 'form',
        labelWidth: 50,
        frame:true,
        width: 220,

        title: 'center-center',
        region: 'center',

        items: [{
            fieldLabel: '文本框'
        }],
        buttons: [{
            text: '按钮'
        }]
    });
    // form end

    // layout start
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
            region: 'north',
            contentEl: 'north-div',
            height: 80,
            bodyStyle: 'background-color:#BBCCEE;'
        },tree,{
            region: 'center',
            split: true,
            border: true,
            layout: 'border',
            items: [grid,form]
        }]
    });
    // layout end

    Ext.get("themeSelect").on("change", function(e) {
        var v = e.target.value;
        if (v == 'default') {
            Ext.util.CSS.swapStyleSheet("theme", "");
        } else {
            Ext.util.CSS.swapStyleSheet("theme", "../resources/css/xtheme-" + e.target.value + ".css");
        }
    });

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../examples.js"></script>
        <div id="north-div">
            <select id="themeSelect">
                <option value="default">default</option>
                <option value="gray">gray</option>
            </select>
        </div>
    </body>
</html>
